<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>电脑摄像头示例</title>
    <style>
        /* 为视频元素设置样式 */
        video {
            width: 640px;
            height: 480px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <h1>电脑摄像头视频流</h1>
    <video id="videoElement" autoplay></video>

    <script>
        // 获取视频元素
        const videoElement = document.getElementById('videoElement');

        // 检查浏览器是否支持媒体设备（摄像头）以及相关API
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // 设置视频参数
            const constraints = {
                video: {
                    width: 640,
                    height: 480
                }
            };

            // 请求访问摄像头权限并处理结果
            navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream) {
                    // 将视频流赋值给视频元素
                    videoElement.srcObject = stream;
                    videoElement.play();
                })
            .catch(function (error) {
                    console.error('无法访问摄像头：', error);
                });
        } else {
            console.error('浏览器不支持媒体设备访问。');
        }
    </script>
</body>

</html>